<template>
    <cell-wrapper
        v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
        :key="wrapperType"
        :wrapper-type="wrapperType"
        :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
        <text-display-cell
            v-if="!isEdit"
            :text="optionsMap[value] || value"
            :columnConfig="columnsConfig"
            v-bind="contentStyle"
        />
        <a-select
            v-else
            :value="value"
            :options="dataSource.options || []"
            class="full-width"
            @change="handleValueChange"
        />
    </cell-wrapper>
</template>

<script>
    import { computed, defineComponent } from 'vue'
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue'
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue'
    export default defineComponent({
        components: {
            TextDisplayCell,
            CellWrapper
        },
        props: {
            // 当前单元格的值
            value: {
                type: [Number, String, null],
                default: () => {
                    return null
                }
            },
            // 单元格的默认样式
            defaultStyle: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 单元格的条件样式配置
            conditionStyle: {
                type: Array,
                default: () => {
                    return []
                }
            },
            // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
            conditionValue: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前列的配置
            columnsConfig: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前单元格依赖的外部数据源
            dataSource: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前单元格是否处于编辑状态
            isEdit: {
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const optionsMap = computed(() => {
                const { options } = props.dataSource || {}
                const optionsMap = {}
                ;(options || []).forEach(optionItem => {
                    const { value, label } = optionItem
                    optionsMap[value] = label
                })

                return optionsMap
            })

            // 内容显示的样式
            const contentStyle = computed(() => {
                let { iconType, icon, color, backgroundColor } = props.defaultStyle || {}

                // 此处可添加条件格式的处理逻辑

                return { iconType, icon, color, backgroundColor }
            })

            function handleValueChange(value) {
                emit('change', value)
            }

            return {
                optionsMap,
                contentStyle,

                handleValueChange
            }
        }
    })
</script>

<style lang="less" scoped>
    .full-width {
        width: 100%;
    }
</style>
